<template>
  <div>
    <el-tabs v-model="activeName" type="card" >
      <el-tab-pane label="分析" name="first" >
        <div class="flex" v-if="PatentInfo.news_pdt">
          <!-- <div class="news_pdtBox">
            <div class="title">专利总数</div>
            <div class="number">{{ PatentInfo.news_pdt.num }}</div>
          </div> -->
          <div class="news_pdtBox">
            <div class="title">发明申请</div>
            <div class="number">{{ PatentInfo.news_pdt.patent }}</div>
          </div>
          <div class="news_pdtBox">
            <div class="title">外观申请</div>
            <div class="number">{{ PatentInfo.news_pdt.apper }}</div>
          </div>
          <div class="news_pdtBox">
            <div class="title">实新申请</div>
            <div class="number">{{ PatentInfo.news_pdt.news }}</div>
          </div>
        </div>

        <div class="echart flex">
          <el-tabs tab-position="left" @tab-click="handleClick" style="height: 200px; width: 125px" stretch>
            <!-- <el-tab-pane label="专利总数"></el-tab-pane> -->
            <el-tab-pane label="发明申请"></el-tab-pane>
            <el-tab-pane label="实新申请"></el-tab-pane>
            <el-tab-pane label="外观申请"></el-tab-pane>
          </el-tabs>
          <div class="lineBox" id="right_box_t"></div>
        </div>

        <div>
          <div class="old_croTile">专利服务机构：</div>

          <div v-if="PatentInfo.old_cro">
            <div
              class="old_text"
              v-for="(item, index) in PatentInfo.old_cro"
              :key="index"
            >
              {{ item.value }}{{ item.count }}
            </div>
          </div>
          <div v-else style="margin-top: 20px;">
            暂无数据
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <div v-show="goitemType">
          <div class="radio">
            <el-radio-group v-model="PatentType" size="mini" @change="radioUpdate">
              <!-- <el-radio-button label="0">总数</el-radio-button> -->
              <!-- <el-radio-button label="1">公开</el-radio-button> -->
              <el-radio-button label="2">发明申请</el-radio-button>
              <el-radio-button label="3">实新申请</el-radio-button>
              <el-radio-button label="4">外观申请</el-radio-button>
              <!-- <el-radio-button label="5">PCT </el-radio-button> -->
              <!-- <el-radio-button label="6">海外</el-radio-button> -->
            </el-radio-group>

            <div class="newBox" v-if="institution.length">
              <div class="newBoxName">最新代理机构：</div>
              <div class="newName" v-for="item in institution" :key="item">
                {{ item }}
              </div>
            </div>
          </div>

          <div class="listBox">
            <div
              class="item_list"
              v-for="(item, index) in list.list"
              :key="index"
              @click="goitemList(item)"
            >
              <div class="number">
                <span class="cril"></span>
                #{{ index + 1 }}
              </div>
              <div class="s_flex s_justify_content_between s_flex_column">
                <div class="right_info">
                  <div class="pantent s_flex s_align_items_center">
                    <p class="sq_title3" style="color: #2a8b2d">
                      {{ item.pno }}
                    </p>
                    <el-tag
                      v-if="item.status == '授权'"
                      effect="dark"
                      size="small"
                      color="#4ba22f"
                      >授权</el-tag
                    >
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#4ba22f"
                      v-if="item.status == '部分无效'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#4ba22f"
                      v-if="item.status == '权利恢复'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#6c778b"
                      v-if="item.status == '未缴年费'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#6c778b"
                      v-if="item.status == '撤回'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#6c778b"
                      v-if="item.status == '驳回'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#6c778b"
                      v-if="item.status == '期限届满'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#6c778b"
                      v-if="item.status == '避重授权'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#6c778b"
                      v-if="item.status == '全部撤销'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#da7b21"
                      v-if="item.status == '实质审查'"
                      >{{ item.status }}
                    </el-tag>
                    <el-tag
                      effect="dark"
                      size="small"
                      color="#da7b21"
                      v-if="item.status == '公开'"
                      >{{ item.status }}
                    </el-tag>
                  </div>
                  <h3
                    class="sq_tilte3 line_h_30 sq_tilte_color content_spacing ft_weight_400"
                  >
                    {{ item.tic }}
                  </h3>
                  <div class="sq_content sq_content_color">
                    <p class="ft_weight_400 line_h_26">公开（公告）日：{{ item.pd }}</p>
                    <p class="ft_weight_400 line_h_26">
                      当前申请(专利权)人：{{ item.aspo }}
                    </p>
                  </div>
                  <div class="info_text_div">
                    <p class="context zy_color">摘要</p>
                    <p class="context w words-hidden-2">{{ item.abso }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="pagination">  
            <el-pagination
              background
              small
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="total"
              align="left"
              :pager-count="5"
            >
            </el-pagination>
          </div>
        </div>
        <detail v-show="!goitemType" @back="back" :pid="pid"></detail>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  companyYearInfo,
  expression,
  companyPatentInfo,
} from "@/api/configApi" 
import * as echarts from "echarts";
import detail from "./details/detail";
export default {
  components: { detail },
  data() {
    return {
      total: 0,
      id: this.$route.query.id,
      page: 1,
      list: [],
      goitemType: true,
      pid: "",
      type: 1,
      typeName: '发明申请',
      institution: [],
      exp: ``,
      activeName: "first",
      PatentInfo: {},
      PatentType: '2',
    };
  },
  watch: {
    "infodata.company_end": {
      handler(newV, oldV) {},
      deep: true,
    },
  },
  props: {
    PatentNumber: {
      type: Object,
      default: () => ({}),
    },
    form_admin: {
      type: Object,
      default: () => ({}),
    },
    company_id: {
      type: Number,
      default: () => 0,
    },
    infodata: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.exp = "当前权利人中文统计=" + this.infodata.company_end + " AND PDB = CNA0";
    this.expression();
    this.companyPatentInfo();
    this.companyYearInfo();
  },
  methods: {
    
    Line(chartDom, X_data, series_data) {
      let myChart = echarts.init(chartDom, "dark");
      let option = {
        backgroundColor: "", //设置无背景色
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["发明公开", "发明授权", "实新授权", "外观授权"],
        },
        grid: {
          top: "20px",
          left: "10px",
          right: "30px",
          bottom: "10px",
          containLabel: true,
        },
        legend: {
          is_show: false,
          top: "-2000px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: X_data,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //不显示坐标轴文字
            // show: false
          },
          splitLine: {
            //不显示分割线
            show: false,
          },
        },
        series: [
          {
            name: this.typeName,
            type: "line",
            stack: "Total",
            data: series_data,
            itemStyle: {
              color: "#5ba1d4",
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    companyYearInfo() {
      companyYearInfo({
        company_id: this.company_id,
        type: this.type,
      }).then((res) => {
        let X_data = res.news_ay ? res.news_ay.value : [];
        let series_data = res.news_ay ? res.news_ay.data : [];
          let Line = document.getElementById("right_box_t");
          this.Line(Line, X_data, series_data);
      }).catch((res) => {
        let Line = document.getElementById("right_box_t");
          this.Line(Line, [], []);
      })
    },
    companyPatentInfo() {
      companyPatentInfo({
        company_id: this.company_id,
        type: this.PatentType,
      }).then((res) => {
        console.log(res, "res");
        this.PatentInfo = res;
      });
    },
    handleClick(tab, event) {
      this.type = Number(tab.index) + 1 ; 
      // if(this.type == '0'){
      //   this.type = ''
      //   this.typeName = '专利总数'
      // }else
       if(this.type == 1){
        this.typeName = '发明专利'
      }else if(this.type == 2){
        this.typeName = '外观设计'
      }else if(this.type == 3){
        this.typeName = '实新授权'
      }
      
      this.companyYearInfo()
    },
    async expression() {
      if (!this.infodata.company_end) return;
      try {
        this.list = await expression({
          express: this.exp,
          page: this.page,
          exactSearch: 1,
          sort_column: "-AD",
        });
        console.log(this.list, "list")
        if (!this.list.page) {
          this.total = 0;
          this.institution = [];
          return;
        }
        this.total = Number(this.list.total);
        if (!this.institution.length) {
          this.institution = this.list.list.map((res_) => {
            return res_.cro;
          });
          this.institution = [...new Set(this.institution)];
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    back() {
      this.goitemType = true;
      // console.log(this.list)
    },
    // 点击详情页
    goitemList(item) {
      this.goitemType = false;
      this.pid = item.pid;
      // console.log('点了一次', item)
      sessionStorage.setItem("list_page", this.page);
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.page = Number(currentPage);
        this.expression();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    radioUpdate(value) {
      console.log(value);

      if (value == 0) {
        this.exp = "申请人中文统计=" + this.infodata.company_end;
      } else if (value == 2) {
        this.exp =
          "当前权利人中文统计=" + this.infodata.company_end + " AND PDB = CNA0";
      } else if (value == 3) {
        this.exp =
          "当前权利人中文统计=" + this.infodata.company_end + " AND PDB = CNY0";
      } else if (value == 4) {
        this.exp =
          "当前权利人中文统计=" + this.infodata.company_end + " AND PDB = CNS0";
      } else if (value == 5) {
        this.exp = "当前权利人中文统计=" + this.infodata.company_end + " AND PCT=是";
      }

      this.page = 1;

      this.expression();

    },
  },
};
</script>

<style scoped lang="less">
.listBox {
}
.pagination {
  margin: 10px auto;
}

.newBox {
  line-height: initial;
  margin-bottom: 10px;

  .newBoxName {
    font-size: 14px;
  }

  .newName {
    font-size: 14px;
  }
}

.news_pdtBox {
  background-color: #f2f3f5;
  border-radius: 5px;
  border: 1px solid #dddfe3;
  padding: 10px;
  margin-right: 20px;
  min-width: 110px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    color: #205ffc;
    margin-bottom: 5px;
    font-size: 14px;
  }
  .number {
    // font-weight: bold;
    font-size: 34px;
  }
}

.item_list_img {
  // width: 188px;
  // height: 237px;
  object-fit: contain;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e6e9f0;
  border-radius: 5px;
  text-align: center;
  flex: 1;

  .img_wap {
    padding-bottom: 0;
    width: 100%;
    height: 100%;

    // position: relative;
    img {
      width: 100%;
      transition: all 0.5s ease;
      padding: 15px;
      object-fit: contain;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.right_info {
  flex: 2;
  margin-left: 20px;
}

.item_list {
  padding: 23px 30px;
  width: 100%;
  // margin: 0 auto 30px;
  // margin-bottom: 30px;
  background: #ffffff;
  // border: 1px solid #ced4ea;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f7f9fc;
  }
}

.item_list:last-child {
  margin-bottom: 0;
}

::v-deep .radio {
  .el-radio-group {
    .el-radio-button {
      margin: 5px 0;

      span {
        border-left: 1px solid #dcdfe6;
      }
    }
  }
}
.echart {
  margin: 20px 0;
}
.old_croTile {
  font-weight: bold;
  margin-top: 30px;
}
.old_text {
  color: #5c5d5c;
  margin-top: 10px;
}
::v-deep .is-left {
  height: 50px;
}
.lineBox {
  height: 200px;
  width: 100%;
}
@media (max-width: 750px) {
  .item_list {
    padding: 23px 15px;
  }

  .item_list_img {
    width: 100%;
    height: 237px;

    margin-bottom: 10px;
  }

  .right_info {
    margin-left: 0px;
  }
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
